<script setup>
  import { NIcon } from 'naive-ui'
  import { ArrowForward } from '@vicons/ionicons5'

</script>

<template>
  <div class="w-full bg-white">
    <div class="jdf-top">
      <div class="relative w-1200px h-full mx-auto">
        <div class="w-500px h-360px absolute top-160px left-0 pingfang-sc">
          <p class="text-size-50px font-semibold text-hex-111">
            上<span class="text-hex-FF7214">聚多房</span> 高效找好房
          </p>
          <div class="mt-40px text-hex-111 text-size-20px leading-40px">
            <div>
              <span class="icon-font text-hex-FF7214 translate-x-4px transform">&#xe670;</span>
              聚多房，房巨多、佣金高、结佣快
            </div>
            <div>
              <span class="icon-font text-hex-FF7214">&#xe670;</span>
              经纪人找房配房必备神器
            </div>
            <div>
              <span class="icon-font text-hex-FF7214">&#xe670;</span>
              集合全城房源，一键约看，成交多多
            </div>
          </div>
          <NuxtLink class="flex justify-center items-center orange-btn w-210px h-64px rounded-32px text-24px mt-60px">
            <span class="text-white">立即使用</span>
            <span class="w-36px h-36px bg-white rounded-18px ml-16px leading-42px">
              <NIcon class="text-hex-FF7214 text-center">
                <ArrowForward></ArrowForward>
              </NIcon>
            </span>
          </NuxtLink>
        </div>
        <img  src="/public/images/product/jdf/top-phone.png" alt="聚多房" class="absolute w-767px h-630px -right-20px top-29px">
      </div>
    </div>
    <div class="w-1200px mx-auto pingfang-sc">
      <div class="flex justify-between">
        <div class="w-576px">
          <img class="w-100px h-100px" src="/public/images/product/jdf/fyz-icon.png" alt="寓盟管家">
          <div class="text-size-36px text-hex-111 leading-50px pl-16px mt-20px">房源真</div>
          <div class="text-size-28px text-hex-777 leading-40px font-normal pl-16px mt-12px">找房！拒绝等待</div>
          <NuxtLink class="orange-host text-24px mt-60px ml-16px hover:opacity-80">
            <span class="mr-14px">立即使用</span>
            <NIcon class="text-hex-FF7214 text-center">
              <ArrowForward></ArrowForward>
            </NIcon>
          </NuxtLink>
        </div>
        <img class="w-600px h-360px" src="/public/images/product/jdf/fy-phone.png" alt="寓盟管家" />
      </div>
      <div class="flex items-center mt-160px">
        <img class="w-600px h-360px" src="/public/images/product/jdf/mp-phone.png" alt="寓盟管家" />
        <div class="ml-120px">
          <img class="w-100px h-100px" src="/public/images/product/jdf/fyd.png" alt="寓盟管家">
          <div class="text-size-36px text-hex-111 leading-50px pl-16px mt-20px">房源多</div>
          <div class="text-size-28px text-hex-777 leading-40px font-normal pl-16px mt-12px">行动！才最重要</div>
          <NuxtLink class="orange-host text-24px mt-60px ml-16px hover:opacity-80">
            <span class="mr-14px">立即使用</span>
            <NIcon class="text-hex-FF7214 text-center">
              <ArrowForward></ArrowForward>
            </NIcon>
          </NuxtLink>
        </div>
      </div>
      <div class="flex justify-between mt-160px">
        <div class="w-576px">
          <img class="w-100px h-100px" src="/public/images/product/jdf/cangku.png" alt="寓盟管家">
          <div class="text-size-36px text-hex-111 leading-50px pl-16px mt-20px">佣金高</div>
          <div class="text-size-28px text-hex-777 leading-40px font-normal pl-16px mt-12px">出手！ 就是现在</div>
          <NuxtLink class="orange-host text-24px mt-60px ml-16px hover:opacity-80">
            <span class="mr-14px">立即使用</span>
            <NIcon class="text-hex-FF7214 text-center">
              <ArrowForward></ArrowForward>
            </NIcon>
          </NuxtLink>
        </div>
        <img class="w-600px h-360px" src="/public/images/product/jdf/yjg.png" alt="寓盟管家" />
      </div>
      <div class="flex items-center mt-160px">
        <img class="w-600px h-360px" src="/public/images/product/jdf/jyk.png" alt="寓盟管家" />
        <div class="ml-120px">
          <img class="w-100px h-100px" src="/public/images/product/jdf/hojian.png" alt="寓盟管家">
          <div class="text-size-36px text-hex-111 leading-50px pl-16px mt-20px">结佣快</div>
          <div class="text-size-28px text-hex-777 leading-40px font-normal pl-16px mt-12px">业绩！近在眼前</div>
          <NuxtLink class="orange-host text-24px mt-60px ml-16px hover:opacity-80">
            <span class="mr-14px">立即使用</span>
            <NIcon class="text-hex-FF7214 text-center">
              <ArrowForward></ArrowForward>
            </NIcon>
          </NuxtLink>
        </div>
      </div>
    </div>
    <div class="h-180px"></div>
  </div>
</template>

<style scoped>
  .jdf-top {
    width: 100%;
    height: 800px;
    background: url('/public/images/product/jdf/jdf-bg.png') 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .orange-host {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background: #FFFFFF;
    border-radius: 25px;
    color: #FF7214;
    border: 1px solid #FF7214;
    cursor: pointer;
  }
</style>